<template>
	<view class="main">
		<view style="margin-top: 68rpx;color: #B1B1B1;" class="font-32">上传照片让更多人关注你<text
				style="font-size: 24rpx;">（最多上传50张）</text></view>

		<view class="flex flex-wrap-w flex-jc-sb img">
			<view v-for="(item,i) in imgs" :key="i">
				<image :src="fileUrl+item" style="height:200rpx;width: 200rpx;" mode="aspectFill" @longpress="open(i)">
				</image>
			</view>
			<view style="width: 200rpx;height: 200rpx;background: #F7F7F7;" class="flex flex-jc-c flex-ai-c"
				v-if="imgs.length < 50" @click="chooseImg">
				<i-icon icon="icon-plus" size="65rpx" />
			</view>
		</view>
	</view>

	<u-popup v-model="show" mode="center" closeable border-radius="15">
		<view style="padding: 100rpx 0 50rpx 0;width: 50vw">
			<view @click="del(index)" style="padding-bottom: 50rpx;text-align: center;">删除</view>
			<view style="padding: 0 0;text-align: center;" @click="changeImg(index)">置顶</view>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import {
		ref
	} from 'vue'
	import {
		onLoad, onUnload
	} from '@dcloudio/uni-app'
	import user from '../../api/user'
	import common from '../../api/common'
	let imgs = ref([])
	let id = ref(null)
	let show = ref(false)
	let index = ref(0)
	let fileUrl = uni.getStorageSync('fileUrl')
	const chooseImg = () => {
		uni.chooseImage({
			count: 9, //默认9
			sizeType: ['compressed', 'original'], //可以指定是原图还是压缩图，默认二者都有'original', 
			sourceType: ['album', 'original'], //从相册选择
			success: async (res : any) => {
				for (let i = 0; i < res.tempFilePaths.length; i++) {
					await common.upload(res.tempFilePaths[i]).then(async (res2) => {
						imgs.value = [...imgs.value, res2.data.url]
					})
				}
				await user.editMemberInfo({
					id: id.value,
					images: imgs.value
				})
			}
		});
	}
	const open = (i : number) => {
		show.value = true
		index.value = i
	}
	const changeImg = async (i : number) => {
		imgs.value.map((item, index) => {
			if (index == i) {
				imgs.value.unshift(imgs.value.splice(index, 1)[0]);
			}
		})
		const res2 = await user.editMemberInfo({
			id: id.value,
			images: imgs.value
		})
		if (res2.code === 200) {
			uni.showToast({
				title: '编辑成功',
				icon: 'none'
			})
			show.value = false
		}
	}
	const del = (i : number) => {
		uni.showModal({
			title: '是否删除该图片',
			confirmColor: '#000',
			cancelColor: '#3333333',
			async success(res) {
				if (res.confirm) {
					let newImgs = JSON.parse(JSON.stringify(imgs.value))
					newImgs.splice(i, 1)
					const res2 = await user.editMemberInfo({
						id: id.value,
						images: newImgs
					})
					if (res2.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						show.value = false
						imgs.value.splice(i, 1)
					}
				}
			}
		})
	}
	const getMemberInfo = async () => {
		const res = await user.getMemberInfo()
		for (let i in res.data.images) {
			res.data.images[i] = res.data.images[i].split(fileUrl)[1]
		}
		imgs.value = res.data.images
		id.value = res.data.id
	}
	onUnload(() => {
		let pages = getCurrentPages()
		let prevPage = pages[pages.length - 2]; //上一页页面实例
		prevPage.$vm.value = {
			type: 9
		}
	})
	onLoad(() => {
		getMemberInfo()
	})
</script>

<style lang="scss" scoped>
	.main {
		margin: 0 60rpx;

		.img {
			margin-top: 100rpx;
		}

		.img::after {
			content: '';
			margin-left: 200rpx;

		}

	}
</style>